<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态切换组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 静态的is是注册组件的名称 -->
        <button @click="current='my-a'">A组件</button>
        <button @click="current='my-b'">B组件</button>
        <button @click="current='my-c'">C组件</button>
        <!-- <component is="my-c"></component> -->
        <!-- 默认情况下,组件切换的时候会重新创建组件,但是有些时候我们希望组件实例
        可以在第一次创建的时候缓存下来 就可以使用keep-alive标签包裹动态组件 -->
        <keep-alive>
            <component :is="current"></component>
        </keep-alive>
    </div>
    <script>
        let myA = {
            template: `
            <div>A组件的内容</div>
            `,
            created() {
                console.log('A组件创建好了');
            }
        }
        let myB = {
            template: `
            <div>B组件的内容</div>
            `,
            created() {
                console.log('B组件创建好了');
            }
        }
        let myC = {
            template: `
            <div>C组件的内容</div>
            `,
            created() {
                console.log('C组件创建好了');
            }
        }
        Vue.component('my-a', myA);
        Vue.component('my-b', myB);
        Vue.component('my-c', myC);
        new Vue({
            el: "#app",
            data: {
                // 存放组件名称的变量
                current: 'my-a'
            },
            methods: {

            }
        })
    </script>
</body>

</html>